
import React from 'react';
import './main.scss';
import { api } from 'js/api/api';
import { panelPop } from 'views/modal/panelPop/panelPop';
import playerStorage from 'js/core/playerStorage';
import Button from 'views/component/button/button';
import Teams from './teams';
import Cheat from './cheat';
import Pub from 'views/modal/pub/pub';


class Main extends React.Component {
    constructor() {
        super()
        this.state = {
            mapType: 1,
            msg: playerStorage.getMsg(),
            menuActive: null,
            gameTime:  parseInt(window.localStorage.getItem('gameTime') || 0)
        }
    }
    componentDidMount() {
        window.eventHandle.on('log', (data) => {
            if (typeof data === 'string') {
                this.state.msg.push(data);
                this.setState({})
            } else if (Array.isArray(data)) {
                let len = data.length;
                let i = 0;
                this.state.msg.push(data[i]);
                this.setState({})
                i += 1;
                let timer = setInterval(() => {
                    if (i > len - 1) {
                        clearInterval(timer);
                    } else {
                        this.state.msg.push(data[i]);
                        this.setState({})
                    }
                    i += 1;
                }, 1000)
            }
        });
        window.eventHandle.on('updateData', (data) => {
            this.setState({})
        });

        setInterval(() => {
            let data = this.state.gameTime + 1;
            window.localStorage.setItem('gameTime', data);
            this.setState({ gameTime: data })
        }, 5000);
    }
    showBag = () => {
        panelPop.showMain('bag')
    }
    showPub = () => {
        panelPop.showMain(<Pub />)
    }
    save = () => {
        api('save', () => {

        })
        playerStorage.saveMsg();
    }
    clear = () => {
        playerStorage.clear();
    }
    myself = () => {
        panelPop.show(<Teams />);
    }
    getTime = (data) => {
        let hours = parseInt(data % 1440 / 60);
        let minutes = parseInt(data % 86400 % 60);
        return `${hours}时${minutes}分`;
    }
    getTimeText = (data) => {
        //上午(7-12),下午(13-17),晚上(18-22),深夜(23-2),凌晨(3-6)
        let hours = parseInt(data % 1440 / 60);
        if (hours >= 8 && hours <= 12) {
            return '上午'
        } else if (hours >= 13 && hours <= 17) {
            return '下午'
        } else if (hours >= 18 && hours <= 22) {
            return '晚上'
        } else if (hours >= 23 || hours <= 2) {
            return '深夜'
        } else if (hours >= 3 && hours <= 7) {
            return '凌晨'
        }
    }
    cheat = () => {
        panelPop.showMainBody(<Cheat />);
    }
    render() {
        let title;
        let player = window.player;
        let mapType = player.basicInfo.mapType;
        let titleText = ['荒野', '村庄', '冒险者营地', '冒险地图'];
        if (mapType !== 5) {
            title = titleText[mapType - 1];
        } else {
            let mazeId = player.mazeInfos.mazeId, zoneId = player.mazeInfos.zoneId;
            title = window.totalConfig.maze[mazeId].name;
        }
        let { msg, menuActive } = this.state;
        let msgNode = [];
        for (let i = msg.length - 1; i >= 0; i--) {
            msgNode.push(<div key={i}>{msg[i]}</div>)
        }
        let gameTime = this.state.gameTime;
        return (
            <div id="main" className="flex-col">
                <div className="header">
                    <div className="flex">
                        <div className="hour">{this.getTime(gameTime)}</div>
                        <div className="time">{this.getTimeText(gameTime)}</div>
                        <div className="flex-col-2" onClick={this.cheat}>阴</div>
                        <div className="flex-g-1 title">{title}</div>
                    </div>
                </div>
                <div id="mainBody" className="flex-col flex-g-1">
                    <div id="mainContent">
                        {this.props.children}
                    </div>

                    <div className="log flex-g-1 scroll-absolute">
                        <div className="logContent">
                            {msgNode}
                        </div>
                    </div>
                    <div className="logHead flex">
                        <div className={"logTitle flex-vcenter" + (player.basicInfo.logShow ? '' : '')} >
                            <div className="log-book" onClick={this.save}></div>
                            <div onClick={this.clear}>日记</div>
                        </div>
                        <div className={"menu flex flex-g-1 jc-end" + (player.basicInfo.bagShow ? '' : '')}>
                            <div className="team menu-item flex-center" onClick={this.showBag}>
                                <div className="fonts fonts-bag"></div>
                                <div>背包</div>
                            </div>
                            <div className="team menu-item flex-center" onClick={this.showPub}>
                                <div className="fonts fonts-player"></div>
                                <div>队伍</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Main;